<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>smartisan mobile</title>
    <style type="text/css">
        body {
            background-color: #aaa;
        }
        
        .mobile {
            width: 350px;
            height: 650px;
            margin: 50px auto;
            background-color: #fdfdfd;
            border: 10px solid #f9f9f9;
            border-radius: 25px;
            position: relative;
            box-shadow: 3px 5px 7px rgba(0, 0, 0, 0.3);
        }
        
        .mobile:before {
            content: "";
            position: absolute;
            width: 60px;
            height: 4px;
            background-color: #f9f9f9;
            right: 60px;
            top: -14px;
            border-radius: 2px 2px 0 0;
        }
        
        .mobile:after {
            content: "";
            position: absolute;
            height: 120px;
            width: 4px;
            background-color: #f9f9f9;
            right:-14px;
            top: 140px;
            border-radius: 0 2px 2px 0;

        }
        
        .listen {
            width: 8px;
            height: 8px;
            background-color: #666;
            border: 3px solid #ccc;
            position: absolute;
            top: 25px;
            left: 140px;
            margin-left: -18px;
            border-radius: 50%;
            box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.5);
        }
        
        .speaker {
            width: 40px;
            height: 7px;
            border: 3px solid #ccc;
            background-color: #666;
            position: absolute;
            left: 180px;
            margin-left: -30px;
            top: 25px;
            border-radius: 10px;
            box-shadow: 2px 2px 2px rgba(255, 255 ,255, 0.5);
        }
        
        .content {
            width: 320px;
            height: 550px;
            background-color: #0c0c0c;
            margin: 60px auto 10px;
            font: 35px/450px "微软雅黑";
            text-align: center;
            color: white;
            border: 3px solid #1a1a1a;
            position: relative;
        }
        
        .content:before {
            content: "";
            width: 320px;
            height: 550px;
            position: absolute;
            top: 0;
            left: 0;
            background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%)
        }
        .content::after{
            content: "";
            position: absolute;
            height: 120px;
            width: 4px;
            background-color: #f9f9f9;
            left:-29px;
            top: 79px;
            border-radius:  2px 0  0 2px;
        }
        
        .home {
            width: 8px;
            height: 8px;
            background-color: #f5f5f5;
            border-radius: 50%;
            margin: 0 auto;
            top: 7px;
            position: relative;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) inset;
        }
        
        .home:before {
            content: "";
            width: 8px;
            height: 8px;
            background-color: #f5f5f5;
            border-radius: 50%;
            position: absolute;
            left: -100px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) inset;
        }       
        .home::after {
            content: "";
            width: 8px;
            height: 8px;
            background-color: #f5f5f5;
            border-radius: 50%;
            position: absolute;
            right:-100px;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) inset;
        }

    </style>
</head>

<body>
    <div class="mobile">
        <div class="listen"></div>
        <div class="speaker"></div>
        <div class="content">Smartisan
        </div>
        <div class="home"></div>
    </div>
</body>

</html>